<template>
  <div class="page45" v-loading="loading">
    <div class="page-title">全省对标（政企重点指标）</div>

    <div class="page-content">
      <div class="left-text">
        <div>小B燎原全标品发展</div> 
      </div>
      <LineChart class="line-chart" :chartData="chartData1" title="小B燎原全标品发展（4月）"></LineChart>
    </div>

    <div class="page-content">
      <div class="left-text">
        <div>收入保有率</div> 
      </div>
      <LineChart class="line-chart" :chartData="chartData2" title="政企收入保有率"></LineChart>
    </div>

  </div> 
</template>
<script>
import { $budgetAPI } from "@/api";
export default {
  components: {
    LineChart: () => import("./charts/page44Chart.vue")
  },
  props: {
    form: {
      type: Object,
      default: () => ({})
    },
  },
  data(){
    return {
      loading: false,
      chartData1: [[],[]],
      chartData2: [[],[]],
    }
  },
  created(){
    
  },
  methods: {
    getData(){
      $budgetAPI.getCountyOperationPage45(
        { 
          token: this.form.token, 
          areaId: this.form.areaId, 
          acctMonth: this.form.month,
          classLevel: this.form.classLevel
        },
        res => {
          if(res.code == 0){
            const { xb, qzkh } = res.content;
            this.chartData1 = [[],[]];
            this.chartData2 = [[],[]];
            xb.forEach(it => {
              this.chartData1[0].push(it.latnName + "\n\n" + it.areaName);
              this.chartData1[1].push(it.indexValue);
            });
            qzkh.forEach(it => {
              this.chartData2[0].push(it.latnName + "\n\n" + it.areaName);
              this.chartData2[1].push(it.indexValue);
            });
          }
          this.loading = false;
        },
        err => {
          console.log(err);
          this.loading = false;
        }
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.page45 {
  padding: 20px 10px;
  border: 1px solid #dee5f3;
  border-radius: 5px;
  margin-top: 20px;
  .page-title {
    text-align: center;
    font-size: 24px;
    font-weight: 900;
  }
  .page-content {
    margin-top: 20px;
    display: flex;
    .left-text {
      width: 90px;
      font-size: 16px;
      display: flex;
      align-items: center;
      text-align: center;
    }
    .line-chart {
      flex: 1;
      height: 260px;
    }
  }
}
</style>